<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <script src="./chalk.js"></script>
    <script src="./wonderland.js"></script>
    <script src="./westeros.js"></script>
    <script src="./customed.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 100%;
            border: 1px solid;
            height: 937px;
            background: url('./素材/index_bg.png');
        }

        nav {
            width: 27%;
            height: 100%;
            /* border: 1px solid red; */
            /* margin: 5px 10px; */
            float: left;
        }

        .navtop {
            width: 100%;
            height: 21%;
            background: url('./素材/border_bg01.png') no-repeat 100% 100%;
            /* margin: auto; */
            /* background-size: 100% 100%; */
            padding: 35px 145px;
        }

        .navtoptext {
            text-align: center;
            color: slateblue;
            font-size: 20px;
            background: url('./素材//title_bg01.png') no-repeat;
            width: 180px;
        }

        .navbottomtext {
            color: white;
            font-size: 40px;
            /* text-align: center; */
            margin-top: 20px;
        }

        .navcenter {
            height: 40%;
            width: 100%;
        }

        .navcentertop {
            width: 100%;
            height: 30px;
            background: url('./素材/box_title.png') no-repeat 100% 100%;
            /* border: 1px solid; */
            padding-left: 30px;
            color: white;
            font-size: 20px;
        }

        .navcentercenter {
            width: 100%;
            height: 100%;
            border: 1px solid;
        }

        .navbottom {
            width: 100%;
            height: 31%;
            margin-top: 70px;
            /* background: red; */
        }

        header {
            width: 46%;
            height: 100%;
            /* background: orange; */
            float: left;
        }

        aside {
            width: 26%;
            height: 100%;
            /* background: red; */
            float: right;
        }

        .heatop {
            width: 100%;
            height: 100px;
            background: url('./素材//title_border.png') no-repeat;
            /* border: 1px solid; */
            background-size: 100% 100%;
            font-size: 40px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .asidetop {
            width: 100%;
            height: 50%;
            /* background: orange; */
        }

        .asidetopcenter {
            width: 100%;
            height: 80%;
            /* border: 1px solid; */
        }

        .asidecenter {
            width: 100%;
            height: 25%;
        }

        .asidebottom {
            width: 100%;
            height: 21%;
            /* background: red; */
        }

        table {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 左侧部分 -->
        <nav>
            <!-- 左上 -->
            <div class="navtop">
                <p class="navtoptext">
                    当前比对数据
                </p>
                <p class="navbottomtext">
                    3,456,789
                </p>
            </div>
            <!-- 左中 -->
            <div class="navcenter">
                <div class="navcentertop">
                    违法犯罪人员分析
                </div>
                <div class="navcentercenter">

                </div>
                <div class="navcentertop">
                    人口出入记录
                </div>
            </div>
            <!-- 左下 -->
            <div class="navbottom">
                <table border="1px" width="100%" height="100%" cellspacing="0" style="color:white" center>
                    <tr>
                        <th>姓名</th>
                        <th>角色</th>
                        <th>开门方式</th>
                        <th>时间</th>
                    </tr>
                    <tr>
                        <td>张梦</td>
                        <td>访客</td>
                        <td>人脸</td>
                        <td>2018-11-01 13：51：23</td>
                    </tr>
                    <tr>
                        <td>张梦</td>
                        <td>访客</td>
                        <td>人脸</td>
                        <td>2018-11-01 13：51：23</td>
                    </tr>
                    <tr>
                        <td>张梦</td>
                        <td>访客</td>
                        <td>人脸</td>
                        <td>2018-11-01 13：51：23</td>
                    </tr>
                    <tr>
                        <td>张梦</td>
                        <td>访客</td>
                        <td>人脸</td>
                        <td>2018-11-01 13：51：23</td>
                    </tr>
                </table>
            </div>
        </nav>
        <!-- 中间部分 -->
        <header>
            <div class="heatop">
                <img src="./素材/jinghui.png" alt="">
                智慧社区内网比对平台
            </div>
        </header>
        <!-- 右边部分 -->
        <aside>
            <div class="asidetop">
                <div class="navcentertop">
                    违法犯罪人员年龄分布
                </div>
                <div class="asidetopcenter">

                </div>
                <div class="navcentertop">
                    违法犯罪人员地区分布
                </div>
            </div>
            <div class="asidecenter">

            </div>
            <div class="navcentertop">
                人口出入时间段统计
            </div>
            <div class="asidebottom">

            </div>
        </aside>
    </div>
</body>

</html>
<script>
    // 左侧
    let navcentercenter = document.querySelector(".navcentercenter")
    let navcenter = echarts.init(navcentercenter, "customed")

    let option = {
        series: [
            {
                type: "pie",
                data: [
                    { value: 140, name: "吸毒人口" },
                    { value: 30, name: "卖淫嫖娼" },
                    { value: 30, name: "经侦嫌疑" },
                    { value: 20, name: "重点人口" },
                    { value: 10, name: "刑侦重点" },
                ],
                center: ['55%', '65%'],
                radius: '60%',
                label: {
                    color: "white"
                },
                clockwise: false
            }
        ],
        legend: {
            left: "left",
            orient: "vertical",
            textStyle: {
                color: "white"
            }
        }
    }

    navcenter.setOption(option)
    // 右侧1
    let asidetopcenter = document.querySelector(".asidetopcenter")
    let heacenter = echarts.init(asidetopcenter, "customed")

    let options = {
        series: [
            {
                type: "pie",
                data: [
                    { value: 140, name: "18-30" },
                    { value: 30, name: "31-40" },
                    { value: 30, name: "41-50" },
                    { value: 20, name: "65岁以上" },
                    { value: 10, name: "未标明" },
                ],
                center: ['55%', '65%'],
                radius: ['20%', '50%'],
                label: {
                    show: false
                },
                clockwise: false
            }
        ],
        legend: {
            left: "left",
            orient: "left",
            textStyle: {
                color: "white"
            }
        }
    }

    heacenter.setOption(options)
    // 右侧2
    let asidecenter = document.querySelector(".asidecenter")
    let ascen = echarts.init(asidecenter, "customed")

    let option1 = {
        xAxis: {
            data: ['河北', '天津', '北京', '新疆', '内蒙', '宁夏', '海南'],

        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    type: "dashed"
                }
            }
        },
        series: [
            {
                type: "bar",
                data: ['10', '90', '200', '350', '400', '330', '220']
            }
        ],

    }

    ascen.setOption(option1)

    // 右三
    let asidebottom = document.querySelector(".asidebottom")
    let asbo = echarts.init(asidebottom, "customed")

    let option2 = {
        xAxis: {
            data: ['6:00-9:00', '10:00-12:00', '13:00-15:00', '16:00-20:00', '21:00-24:00'],
            axisLabel: {
                color: "orange",
                fontSize:10
            },

        },
        yAxis: {

        },
        series: [
            {
                type: "line",
                data: ['800', '250', '450', '800', '250'],
                smooth: true,

            }
        ],

    }

    asbo.setOption(option2)
</script>